<template>
    <div class="problem-item">
        <div class="info">
            <div class="info-title">{{ data.title }}</div>
            <div class="info-num">{{ data.num }}</div>
        </div>
        <div class="progress-bar">
            <div class="progress-value progress1" ref="barRef"></div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';

const progressValue = ref(0);
const barRef = ref(0);
const { data } = defineProps({
    data: {
        type: Object,
        required: true
    }
})

onMounted(() => {
    barRef.value.style.width = data.progress + '%';
})




</script>

<style scoped>
.problem-item {
    margin-bottom: 0.3vw;
}

.problem-item .progress-bar {
    width: 100%;
    height: 0.520833vw;
    background: hsla(0, 0%, 100%, 0.08);
    border-radius: 0.3125vw;
    position: relative;
}

.progress-value {
    width: 0%;
    background: linear-gradient(270deg,
            rgb(0, 255, 239) 0%,
            rgb(31, 163, 240) 100%);
    box-shadow: rgba(236, 196, 25, 0.35) 0px 0px 7p;
    height: 0.520833vw;
    border-radius: 0.3125vw;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 2s;
}

.problem-item .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info .info-title {
    height: 1.041667vw;
    font-size: 0.729167vw;
    color: #cce8ff;
    width: 14.0625vw;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.info .info-num {
    color: rgb(255, 254, 0);
    font-family: homeTime;
    margin-bottom: 1vw;
    font-size: 1vw;
}
</style>